<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>社区志愿者系统</title>
      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <!-- Favicon -->
      <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
      <!-- Typography CSS -->
      <link rel="stylesheet" th:href="@{/static/css/typography.css}">
      <!-- Style CSS -->
      <link rel="stylesheet" th:href="@{/static/css/style.css}">
      <!-- Responsive CSS -->
      <link rel="stylesheet" th:href="@{/static/css/responsive.css}">
      <!-- 引入element样式 -->
<!--      <link rel="stylesheet" th:href="@{/css/https_unpkg.com_element-ui_lib_theme-chalk_index.css}">-->

   </head>
   <body>
      <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
      <!-- Wrapper Start -->
      <div th:fragment="wrapper" class="wrapper">
         <!-- Sidebar  -->
         <div th:fragment="list" class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a th:href="@{/admin/index}">
                  <img th:src="@{/static/images/logo.png}" class="img-fluid" alt="">
                  <span>XRay</span>
               </a>
               <div class="iq-menu-bt-sidebar">
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                        <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
               </div>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>用户管理</span></li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-3-fill"></i><span>Volunteer</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a th:href="@{/admin/toList}"><i class="ri-file-list-fill"></i> 志愿者列表</a></li>
                           <li><a th:href="@{/admin/toAdd}"><i class="ri-user-add-fill"></i> 添加志愿者</a></li>
                           <li><a href="#"><i class="ri-profile-fill"></i> 审核志愿者申请</a></li>
                           <li><a href="#"><i class="ri-file-edit-fill"></i> 管理志愿服务信息</a></li>
                        </ul>
                     </li>
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>数据可视化</span></li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-bar-chart-2-fill"></i><span>Charts</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="#"><i class="ri-file-list-fill"></i>All Doctors</a></li>
                           <li><a href="#"><i class="ri-user-add-fill"></i> Add Doctor</a></li>
                           <li><a href="#"><i class="ri-profile-fill"></i>Doctor Profile</a></li>
                           <li><a href="#"><i class="ri-file-edit-fill"></i> Edit Doctor</a></li>
                        </ul>
                     </li>
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Responsive Breadcrumb End-->
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
            <div th:fragment="top" class="iq-top-navbar">
               <div class="iq-navbar-custom">
                  <div class="iq-sidebar-logo">
                     <div class="top-logo">
                        <a href="admin/index.html" class="logo">
                        <img th:src="@{/images/logo.png}" class="img-fluid" alt="">
                        <span>XRay</span>
                        </a>
                     </div>
                  </div>
                  <nav class="navbar navbar-expand-lg navbar-light p-0">
                     <div class="iq-search-bar">
                        <form action="#" class="searchbox">
                           <input v-model="searchTip" type="text" class="text search-input" placeholder="搜索">
                           <a class="search-link" href="#" @click="searchByTip()"><i class="ri-search-line"></i></a>
                        </form>
                     </div>
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                     <i class="ri-menu-3-line"></i>
                     </button>
                     <div class="iq-menu-bt align-self-center">
                        <div class="wrapper-menu">
                           <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                        </div>
                     </div>
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navbar-list">
                           <li class="nav-item iq-full-screen">
                              <a href="#" class="iq-waves-effect" id="btnFullscreen"><i class="ri-fullscreen-line"></i></a>
                           </li>

                           <!-- 提示标签  -->
                           <li class="nav-item">
                              <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <!-- <span class="bg-danger dots"></span> -->
                              </a>
                           </li>

                           <!-- 信息标签 -->
                           <li class="nav-item dropdown">
                              <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-mail-open-fill"></i>
                                 <!-- <span class="bg-primary count-mail"></span> -->
                              </a>
                           </li>
                        </ul>
                     </div>

                     
                     <ul class="navbar-list">
                        <li>
                           <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                              <img th:src="@{/images/user/1.jpg}" class="img-fluid rounded mr-3" alt="user">
                              <div class="caption">
                                 <h6 class="mb-0 line-height" th:text="${session.adminInfo.username}"></h6>
                                 <span class="font-size-12">Available</span>
                              </div>
                           </a>
                           <div class="iq-sub-dropdown iq-user-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <a href="#" class="iq-sub-card iq-bg-primary-hover">
                                       <div class="media align-items-center">
                                          <div class="rounded iq-card-icon iq-bg-primary">
                                             <i class="ri-file-user-line"></i>
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">个人信息</h6>
                                             <p class="mb-0 font-size-12">访问你的个人信息页面。</p>
                                          </div>
                                       </div>
                                    </a>

                                    <div class="d-inline-block w-100 text-center p-3">
                                       <a class="bg-primary iq-sign-btn"  role="button">Sign out<i class="ri-login-box-line ml-2"></i></a>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </nav>
               </div>
            </div>
            <!-- TOP Nav Bar END -->

            <!-- Footer -->
            <footer th:fragment="footer" class="bg-white iq-footer">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                           <li class="list-inline-item"><a href="#">Privacy Policy</a></li>
                           <li class="list-inline-item"><a href="#">Terms of Use</a></li>
                        </ul>
                     </div>
                     <div class="col-lg-6 text-right">
                        <!-- Copyright 2020 更多模板：<a href="http://www.mycodes.net/" target="_blank">模板之家</a> All Rights Reserved. -->
                     </div>
                  </div>
               </div>
            </footer>
            <!-- Footer END -->
         </div>
      </div>
      <!-- Wrapper END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script th:src="@{/static/js/jquery.min.js}"></script>
      <script th:src="@{/static/js/popper.min.js}"></script>
      <script th:src="@{/static/js/bootstrap.min.js}"></script>
      <!-- Appear JavaScript -->
      <script th:src="@{/static/js/jquery.appear.js}"></script>
      <!-- Countdown JavaScript -->
      <script th:src="@{/static/js/countdown.min.js}"></script>
      <!-- Counterup JavaScript -->
      <script th:src="@{/static/js/waypoints.min.js}"></script>
      <script th:src="@{/static/js/jquery.counterup.min.js}"></script>
      <!-- Wow JavaScript -->
      <script th:src="@{/static/js/wow.min.js}"></script>
      <!-- Apexcharts JavaScript -->
      <script th:src="@{/static/js/apexcharts.js}"></script>
      <!-- Slick JavaScript -->
      <script th:src="@{/static/js/slick.min.js}"></script>
      <!-- Select2 JavaScript -->
      <script th:src="@{/static/js/select2.min.js}"></script>
      <!-- Owl Carousel JavaScript -->
      <script th:src="@{/static/js/owl.carousel.min.js}"></script>
      <!-- Magnific Popup JavaScript -->
      <script th:src="@{/static/js/jquery.magnific-popup.min.js}"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script th:src="@{/static/js/smooth-scrollbar.js}"></script>
      <!-- lottie JavaScript -->
      <script th:src="@{/static/js/lottie.js}"></script>
      <!-- Chart Custom JavaScript -->
      <script th:src="@{/static/js/chart-custom.js}"></script>
      <!-- Custom JavaScript -->
      <script th:src="@{/static/js/custom.js}"></script>


<!--      <script th:src="@{/js/vue.js}"></script>-->
<!--      &lt;!&ndash; 引入element组件库 &ndash;&gt;-->
<!--      <script type="module" th:src="@{/js/https_unpkg.com_element-ui_lib_index.js}"></script>-->
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script th:src="@{/static/js/axio.js}"></script>
      <script th:inline="javascript"> let rootUrl = [[@{/}]]; </script>


      <script>
         new Vue({
            el: "#content",
            data: {
               pageNum: 1,  //第几页
               pageSize: 3, //每页几条
               pages: 1, // 页面总数
               total: 0,  // 记录行数
               list: [],  // 数据
               userInfo: {}, // 查看用户信息存放处
               roleList: [], // 下拉角色列表选择数据存放处
               roleId: 0,  // 下拉角色列表 角色编号存放处
               searchTip: '', // 搜索框信息存放处
               user: {}   // 修改用户的用户信息存放处

            },
            mounted(){
               this.getList(1); // 页面渲染完毕，加载数据
               this.getRoleList();
            },
            methods:{
               getList(pageNum){
                  // 发送ajax请求，尝试登录
                  let url = rootUrl+`admin/getUserList?pageNum=${pageNum}&pageSize=${this.pageSize}`;
                  url = url+'&roleId='+this.roleId+'&searchInfo='+this.searchTip;
                  console.log(url);
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             let pageInfo = data.data;
                             this.pageNum = pageInfo.pageNum;
                             this.pageSize = pageInfo.pageSize;
                             this.pages = pageInfo.pages;
                             this.total = pageInfo.total;
                             this.list = pageInfo.list;
                          })
                          .catch(error => {
                             alert(error);
                          });
               },
               myFormatDate(value){//处理日期格式
                  let dt = new Date(value);
                  let year = dt.getFullYear();
                  let month = (dt.getMonth() + 1).toString().padStart(2,'0');
                  let date = dt.getDate().toString().padStart(2,'0');
                  let hour = dt.getHours().toString().padStart(2,'0');
                  let minute = dt.getMinutes().toString().padStart(2,'0');
                  let second = dt.getSeconds().toString().padStart(2,'0');
                  return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
               },
               showInfo(id){ // 模态框展示用户详细信息info
                  console.log(id);
                  let url = rootUrl+`admin/getInfoByUserId?id=${id}`;
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             console.log(data.data);
                             this.userInfo = data.data;

                          })
                          .catch(error => {
                             alert(error);
                          });

               },
               getRoleList(){
                  let url = rootUrl+`admin/getRoleList`;
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             this.roleList = data.data;

                          })
                          .catch(error => {
                             alert(error);
                          });
               },
               selectByRole(roleId){
                  console.log(roleId);
                  this.roleId = roleId;
                  this.getList(1);
               },
               searchByTip(){
                  console.log(this.searchTip);
                  this.getList(1);

               },
               getUser(id){
                  let url = rootUrl+`admin/getUserById?id=${id}`;
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             console.log(data);
                             this.user = data.data;

                          })
                          .catch(error => {
                             alert(error);
                          });
               },
               updateUser(){
                  console.log(this.user);
               }
            }
         });

      </script>

      <script>
         new Vue({
            el: '#app',
            data: function() {
               return { visible: false }
            }
         })
      </script>

   </body>
</html>